<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">


function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
    
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '800px';
  }
}

  function initialize() {
  
    detectBrowser();
    //$selected, $notselected
    var myLatlng = new google.maps.LatLng(13.759127,100.565185);
    var myOptions = {
      scrollwheel: false,
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    //'http://www.google.com/mapfiles/marker.png'

    var info = [
                     <!--[foreach from=$objectArray item=item]-->
                      [
                        '<!--[$item.id]-->', 
                        '<!--[$item.house_no]-->', 
                        <!--[$item.latitude]-->,
                        <!--[$item.longitude]-->, 
                        <!--[$item.id]-->,
                      'http://maps.gstatic.com/intl/th_ALL/mapfiles/ms/micons/rangerstation.png'
                      ],
                     <!--[/foreach]-->
                  ];
     //alert(marker);

      setMarkers(map, info);
    }

function makeMarker(imageName){
  //alert(imageName);
  var iconImage = new google.maps.MarkerImage(imageName,
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
    return iconImage;
}

function makeShadow(){
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
    return iconShadow;
}
  
  function setMarkers(map, locations) {
    for (var i = 0; i < locations.length; i++) {
      var data = locations[i];
      var myLatLng = new google.maps.LatLng(data[2], data[3]);
     var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          //shadow: makeShadow(),
          icon: data[5],
          //shape: shape,
          title: data[0],
          zIndex: data[4]
      });

                   
    var contentString = data[1];
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
/*    
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
    */
    
    google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker));
    
    }
    
    function infoCallback(infowindow, marker) {
      return function() {
      infowindow.open(map, marker);
  };
}
  }


</script>
</head>
<a href="index.php?module=VoteThailandPoll&type=user&func=form&ctrl=VillagePoll" target="_blank" ><b><input type="button" value="แจ้งผลสำรวจ"></a>
<fieldset>
  <legend>&nbsp;Map&nbsp;Poll</legend>
<body onload="initialize()">
  <div id="map_canvas" style="position:relative;"></div>
</body>

</fieldset><BR>
<fieldset>
  <legend>&nbsp;Province&nbsp;</legend>
  <TABLE width="100%">
    <TR bgcolor="#99CCCC">
      <TH width="10%">id</TH>
      <TH width="20%">name</TH>
      <TH width="20%">latitude</TH>
      <TH width="20%">longitude</TH>
      <TH width="20%">party name</TH>
      <TH width="10%"></TH>
    </TR>
   <!--[foreach from=$objectArray item=item]-->
        <TR bgcolor="<!--[cycle values='#FFFFFF,#E8EFF7']-->">
          <TD><!--[$item.id]--></TD>
          <TD><!--[$item.house_no]--></TD>
          <TD><!--[$item.latitude]--></TD>
          <TD><!--[$item.longitude]--></TD>
          <TD><!--[$item.party_name]--></TD>
          <TD>
            <a target="_blank" href="<!--[pnmodurl modname='VoteThailandPoll' type='admin' func='form' ctrl='Province' id=$item.id]-->">
              <img src="modules/VoteThailandPoll/pnimages/pencil.png" />
            </a>
            <a href="<!--[pnmodurl modname='VoteThailandPoll' type='admin' func='delete' ctrl='Province' id=$item.id ]-->" 
               onclick="return confirm('Are you sure you want to delete?')"
            >
              <img src="modules/VoteThailandPoll/pnimages/delete.png" />
           </a>
          </TD>
        </TR>
   <!--[/foreach]-->
  </TABLE>

</fieldset>

<BR>
</html>

